<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>昵称生成器</title>
</head>
<style>

    #provincesContainer{
        display: flex;
        flex-wrap: wrap;
    }

    .provinceClass{
        padding: 16px;
        border-radius: 10px;
        background-color: darkgreen;
        margin: 4px;
        color: white;
        font-size: medium;
        font-weight: bold;
    }

    #lettersContainer{
        display: flex;
        flex-wrap: wrap;
    }

    .letterClass{
        padding: 16px;
        border-radius: 10px;
        background-color: orange;
        margin: 4px;
        color: white;
        font-size: medium;
        font-weight: bold;
    }

    #resultContainer{
        padding: 8px;
        position: sticky;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: black;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: xx-large;
    }

    .text{
        border: 1px solid gray;
        height: 35px;
        margin: 8px auto;
    }

    .text input{
        border: 0;
        width: 99%;
        height: 30px;
    }
</style>
<body>
    <div id="provincesContainer"></div>
    <div id="lettersContainer"></div>
    <div>底下输入点(۰)后面的内容</div>
    <div class="text">
        <input type="text" id="text" oninput="textChange()">
    </div>
    <div id="resultContainer">
        <div id="selectedProvince"></div>
        <div id="selectedLetter"></div>
        <div>۰</div>
        <div id="suffixContainer"></div>
    </div>
</body>

<script>
    let provinces = [
        "京","津","冀","粤","蒙",
        "宁","新","藏","桂","黑",
        "辽","吉","渝","鲁","晋",
        "陕","甘","青","豫","皖",
        "鄂","湘","苏","浙","赣",
        "闽","沪","琼","台","川",
        "云"
    ]

    for (const index in provinces) {
        let provinceDiv = document.createElement("div")
        provinceDiv.className = "provinceClass"
        provinceDiv.innerHTML = provinces[index]
        provinceDiv.onclick = function(element){
            document.querySelector("#selectedProvince").innerHTML = provinces[index]
        }
        document.querySelector("#provincesContainer").appendChild(provinceDiv)
    }

    for (let index = 0; index < 26; index++) {
        let letterDiv = document.createElement("div")
        letterDiv.className = "letterClass"
        letterDiv.onclick = function(element){
            document.querySelector("#selectedLetter").innerHTML = String.fromCharCode(65+index)
        }
        letterDiv.innerHTML = String.fromCharCode(65+index)
        document.querySelector("#lettersContainer").appendChild(letterDiv)
    }

    function textChange(){
        document.querySelector("#suffixContainer").innerHTML = document.querySelector("#text").value
    }
    
</script>

</html>